<template>
    <div>
        <el-card>
            <h1 style="font-weight:700;font-size:24px">用户管理</h1>
            <el-divider></el-divider>
            <br>
            <div>
                <el-form ref="form" :model="ssform" label-width="80px" :inline="true">
                    <el-form-item label="账号">
                        <el-input v-model="ssform.zhanghao" style="width: 260px;"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="ssform.name" style="width: 260px;"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-select v-model="ssform.roleid" placeholder="请选择">
                            <el-option label="请选择" value=""></el-option>
                            <el-option v-for="item in rolelist" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div style="margin-left: 400px;">
                    <el-button @click="chongzhi()">重置</el-button>
                    <el-button style="background-color: #394E9E;color:white" @click="getdata()">查询</el-button>
                </div>

            </div>
            <br>
            <el-button style="background-color: #394E9E;color:white" @click="dialogFormVisible = true">新建用户</el-button>
            <br><br>
            <el-table :data="list" border style="width: 100%">
                <el-table-column prop="zhanghao" label="账号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="联系方式" width="180">
                </el-table-column>
                <el-table-column label="角色" width="180">
                    <template scope="scope">
                        <span v-for="i in rolelist" :key="i._id">
                            <span v-if="i._id == scope.row.roleid">{{ i.name }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="xueli" label="学历" width="140">
                </el-table-column>
                <el-table-column prop="minzu" label="民族" width="140">
                </el-table-column>
                <el-table-column label="创建日期" width="180">
                    <template scope="scope">
                        <span>{{ scope.row.data | shijian }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cz" label="操作">
                    <template slot-scope="scope">
                        <el-button style="background-color: #394E9E;color:white"
                            @click="bianji(scope.row)">编辑</el-button>
                        <el-button style="background-color: #394E9E;color:white"
                            @click="mima(scope.row)">重置密码</el-button>
                        <el-button v-if="scope.row.roleid != '65f012f91e21552a268ad562'"
                            @click="shanchu(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加 -->
            <el-dialog title="添加" :visible.sync="dialogFormVisible">
                <el-form :model="userform">
                    <el-form-item label="账号" :label-width="formLabelWidth">
                        <el-input v-model="userform.zhanghao" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="userform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth">
                        <el-input v-model="userform.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学历" :label-width="formLabelWidth">
                        <el-select v-model="userform.xueli" placeholder="请选择学历">
                            <el-option v-for="education in educations" :key="education" :label="education"
                                :value="education"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="民族" :label-width="formLabelWidth">
                        <el-select v-model="userform.minzu" placeholder="请选择民族">
                            <el-option v-for="nationality in nationalities" :key="nationality" :label="nationality"
                                :value="nationality"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色" :label-width="formLabelWidth">
                        <el-select v-model="userform.roleid" placeholder="请选择">
                            <el-option v-for="item in rolelist" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像" :label-width="formLabelWidth">
                        <el-upload action="http://localhost:3000/upload" :on-success="success" class="avatar-uploader"
                            :show-file-list="false">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button style="background-color: #394E9E;color:white" @click="add">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改 -->
            <el-dialog title="修改" :visible.sync="udialogFormVisible">
                <el-form :model="upform">
                    <el-form-item label="账号" :label-width="formLabelWidth">
                        <el-input v-model="upform.zhanghao" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="upform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth">
                        <el-input v-model="upform.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学历" :label-width="formLabelWidth">
                        <el-select v-model="upform.xueli" placeholder="请选择学历">
                            <el-option v-for="education in educations" :key="education" :label="education"
                                :value="education"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="民族" :label-width="formLabelWidth">
                        <el-select v-model="upform.minzu" placeholder="请选择民族">
                            <el-option v-for="nationality in nationalities" :key="nationality" :label="nationality"
                                :value="nationality"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色" :label-width="formLabelWidth">
                        <el-select v-model="upform.roleid" placeholder="请选择">
                            <el-option v-for="item in rolelist" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="udialogFormVisible = false">取 消</el-button>
                    <el-button style="background-color: #394E9E;color:white" @click="upp">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改密码" :visible.sync="mimasta">
                <el-form :model="obj">
                    <el-form-item label="修改后的密码:" :label-width="formLabelWidth">
                        <el-input v-model="obj.password" autocomplete="off" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="mimasta = false">取 消</el-button>
                    <el-button style="background-color: #394E9E;color:white" @click=queren>确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imageUrl: '',
            list: [],
            rolelist: [],
            dialogFormVisible: false,
            udialogFormVisible: false,
            userform: {
                zhanghao: '',
                name: '',
                phone: '',
                password: '123456',
                xueli: '',
                minzu: '',
                data: '',
                roleid: '',
                data: '',
                img: '',
            },
            upform: {
                zhanghao: '',
                name: '',
                phone: '',
                password: '123456',
                xueli: '',
                minzu: '',
                data: '',
                roleid: '',
                data: '',
                img: '',
            },
            formLabelWidth: '120px',
            //56民族
            nationalities: [
                "汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族",
                "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族",
                "哈萨克族", "黎族", "傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族",
                "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族", "锡伯族",
                "柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族",
                "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族",
                "俄罗斯族", "裕固族", "乌孜别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
            ],
            educations: [
                "小学", "初中", "高中", "大专", "大学本科", "硕士", "博士"
            ],
            ssform: {
                zhanghao: '',
                name: '',
                roleid: '',
            },
            rules: {
                zhanghao: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                region: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                data: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { type: 'number', message: '联系方式必须为数字值', trigger: 'blur' }
                ],
                roleid: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
                minzu: [
                    { required: true, message: '请选择民族', trigger: 'change' }
                ],
            },
            mimasta: false,
            obj: {
                zhanghao: '',
                name: '',
                phone: '',
                password: '123456',
                xueli: '',
                minzu: '',
                data: '',
                roleid: '',
                data: '',
                img: '',
            },
            password:''
        }
    },
    methods: {
        async getdata() {
            let { data } = await this.axios.get('/userlist', { params: { zhanghao: this.ssform.zhanghao, name: this.ssform.name, roleid: this.ssform.roleid } })
            this.list = data.list
        },
        async getrole() {
            let { data } = await this.axios.get('/rolelist')
            this.rolelist = data.rolelist
        },
        async add() {
            let { data } = await this.axios.post('/adduser', this.userform)
            if (data.code == 200) {
                this.$message({
                    type: 'success',
                    message: data.msg
                })
                this.dialogFormVisible = false
                this.getdata()
            } else {
                this.$message({
                    type: 'error',
                    message: data.msg
                })
                this.dialogFormVisible = false
            }
        },
        async bianji(row) {
            this.upform = { ...row }
            this.udialogFormVisible = true
        },
        async upp() {
            let { data } = await this.axios.post('/uppuser', this.upform)
            if (data.code == 200) {
                this.udialogFormVisible = false
                this.$message.success('修改完成')
                this.getdata()
            } else {
                this.$message.error('出了点小问题呢')
            }
        },
        chongzhi() {
            this.ssform = {
                zhanghao: '',
                name: '',
                roleid: '',
            }
        },
        updateDate() {
            this.userform.data = new Date().toISOString().slice(0, 10);
        },
        mima(row) {
            this.mimasta = true
            this.obj = row
            this.obj.password = ''
            console.log(this.obj);
        },
        async queren() {
            let { data } = await this.axios.post('/uppuser', this.obj)
            if (data.code == 200) {
                this.mimasta = false
                this.$message.success('修改完成')
                this.getdata()
            } else {
                this.$message.error('出了点小问题呢')
            }
        },
        success(res, file, fileList) {
            this.userform.img = res.path;
            this.imageUrl = res.path;
            console.log(res);
        },
        async shanchu(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let { data } = await this.axios.delete(
                    `http://localhost:3000/del/${id}`
                );
                if (data.code == 201) {
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        }
    },
    mounted() {
        this.getdata()
        this.getrole()
        this.updateDate();
    },
    watch: {
        // 如果需要的话，你可以设置一个侦听器来监听特定数据的变化，并更新日期
        // 例如，如果你有一个数据属性表示时区，并且你想根据时区的变化来更新日期
        timeZone: {
            handler() {
                this.updateDate();
            },
            deep: true // 如果timeZone是一个对象或数组，需要设置deep为true来深度监听其变化
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>